import { FC } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useLocale } from "@/locales"

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const MutiSelector: FC<any> = (props: any): JSX.Element => {
	const { options, name, label, onFocus, rules, selectorProps, mode } = props
	const { formatMessage } = useLocale()
	return (
		<SFormItem name={name} label={`${formatMessage({ id: label })}:`} rules={rules}>
			<StyleSelect
				mode={mode || "multiple"}
				placeholder={formatMessage({ id: "label.select_all" })}
				allowClear
				options={options}
				onFocus={onFocus}
				{...selectorProps}
			/>
		</SFormItem>
	)
}
